export const Pie4 = () => {
  return `
 
 
  <template>
  <div
    class="content"
    :style="{
      height: height,
      width: width,
    }"
  >
    <div id="huikuan-echarts"></div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import "echarts";
const props = defineProps({
  width: {
    //列数据
    type: String,
    default: "930px",
  },
  height: {
    type: String,
    default: "492px",
  },
});
onMounted(() => {
  getEcharts();
});

const getEcharts = () => {
 //展示数据
const optionData = [];
 //展示数据
const optionData2 = [];
//扇形图颜色数据
const colorList = [
"#25CEF0","#E8574C","#D0D96F","#fff"
];
//请求的数据
const resultData = [
   {
      name: '罗汉松',
      value: 95,
      percent: '8.05'
   },
   {
      name: '四季桂',
      value: 120,
      percent: '10.17'
   },
   {
      name: '马齿笕',
      value: 98,
      percent: '8.31'
   },
];
let sum = 0;
resultData.forEach(item => {
   sum += item.value;
})
resultData.forEach((item,i) => {
   optionData.push({ value: item.value, name: item.name,label:{
              formatter: function(params) {
            console.log(params)
            return \`{a|\${params.name}}
{b|\${params.value}个(\${params.percent}%)}\`;
          },
   } });

        optionData2.push(
  { value: item.value, name: item.name,color:'#fff' }
    )
    optionData2.push(
       {
       value:10,
       name:"12",
     
       label:{
          position:"inside",
          backgroundColor:"#fff",
          width:15,
          height:15,
          borderWidth:4,
          borderTYpe:"solid",
         // borderColor:color[i],
          borderRadius:300
       }
    }
    )
})

  let myChart = echarts.init(document.getElementById("huikuan-echarts"));
  let option = {


   grid:{
  
   },
   color:colorList,
   series: [
      {
         type: 'pie',
         radius: ['50%', '60%'],
         center: ['50%', '50%'],
         itemStyle:{
            borderRadius:20,
         },
               label: {
          textStyle: {
            fontSize: 16,
            color: "#fff",
          },
  
          rich: {
            a: {
              color: "rgba(211, 228, 254, 1)",
              fontSize: 16,
              align: "center",
              lineHeight: 25,
              fontWeight: 600,
            }, 
            b: {
              color: "inherit",
              fontSize: 16,
              align: "center",
              lineHeight: 25,
              fontWeight: 600,
            },
          },
        },
         labelLine: {
            show: true,
         },
         data: optionData,
         z:1
      },
  {
         type: 'pie',
         radius: ['50%', '60%'],
         center: ['50%', '50%'],
         itemStyle:{
            borderRadius:20,
         },
               label: {
          textStyle: {
            fontSize: 16,
            color: "#fff",
          },
  
          rich: {
            a: {
              color: "rgba(211, 228, 254, 1)",
              fontSize: 16,
              align: "center",
              lineHeight: 25,
              fontWeight: 600,
            }, 
            b: {
              color: "inherit",
              fontSize: 16,
              align: "center",
              lineHeight: 25,
              fontWeight: 600,
            },
          },
        },
         labelLine: {
            show: true,
         },
         data: optionData2,
         z:3
      },
   ]
}
  myChart.setOption(option);
};
const count = ref(0);
</script>

<style scoped>
.content {
  position: relative;
  background-color: #022b66;
  box-shadow: 0px 3px 50px 1px rgba(0, 101, 175, 0.4);
  border: 1px solid rgba(19, 127, 212, 0.6);
}
#huikuan-echarts {
  width: 100%;
  height: 100%;
}
</style>

  
  

  
  `;
};
